import * as PIXI from 'pixi.js'
import useMainStore from '@/store/modules/useMainStore'
import { setPixi } from '@/store/modules/usePixiStore'
import { wheelBottom, mousedownBottom } from '@/utils/events'
import { useWindowSize } from '@vueuse/core'
export default async (params: { scale: number; cbWidth: number; textureSource: PIXI.TextureSource }) => {
  const mainStore = useMainStore()
  const app = await mainStore.getApp()
  const { width, height } = useWindowSize()
  // 上框
  // 高度1: 26 高度2: 92 宽度1: 67 宽度2: 61
  const upSprite = new PIXI.Sprite(
    new PIXI.Texture({
      source: params.textureSource,
      frame: new PIXI.Rectangle(0, 826, params.cbWidth, 97),
    }),
  )
  setPixi('upSprite', upSprite)
  // 下框
  const downSprite = new PIXI.Sprite(
    new PIXI.Texture({
      source: params.textureSource,
      frame: new PIXI.Rectangle(0, 826, params.cbWidth, 24),
    }),
  )
  downSprite.anchor.set(0.5)
  // downSprite.pivot.set(downSprite.width / 2, downSprite.height / 2)
  downSprite.position.x = downSprite.width / 2
  downSprite.position.y = (height.value - downSprite.height / 4) / params.scale
  downSprite.rotation = Math.PI

  // 底部
  const bottomContainer = new PIXI.Container()
  // 背景
  const borderContainer = new PIXI.Container()
  {
    const bottomRect = new PIXI.Graphics()
    const borderRect = new PIXI.Graphics()
    const borderParams = {
      color: 'rgb(213, 195, 171)', // 填充颜色
      x: 48, // 横向边距
      y: 15, // 纵向边距
      width: width.value / params.scale - 96,
      height: height.value / params.scale - 30,
    }
    const bottomParams = {
      color: 'rgb(175, 159, 139)', // 填充颜色
      x: (borderParams.width * 0.1 + 96) / 2,
      y: 114,
      width: (width.value / params.scale - 96) * 0.88 - 453 * 0.83 + 48,
      height: height.value / params.scale - 114 - 30,
    }
    bottomRect.rect(bottomParams.x, bottomParams.y, bottomParams.width, bottomParams.height).fill({
      color: bottomParams.color,
    })
    borderRect.rect(borderParams.x, borderParams.y, borderParams.width, borderParams.height).fill({
      color: borderParams.color,
    })
    borderRect.rect(bottomParams.x, bottomParams.y, bottomParams.width, bottomParams.height).cut()
    const bottomSprite = new PIXI.Sprite(app!.renderer.textureGenerator.generateTexture(bottomRect))
    bottomContainer.addChild(bottomSprite)
    bottomContainer.position.set(bottomParams.x, bottomParams.y)
    borderContainer.addChild(borderRect)
    // 卡套
    const cardSetsContainer = new PIXI.Container()
    bottomContainer.addChild(cardSetsContainer)
    setPixi('cardSets', cardSetsContainer)
  }
  setPixi('bottom', bottomContainer)
  wheelBottom.whiteAdd(bottomContainer, ...bottomContainer.children)
  // mousemoveBottom.whiteAdd(bottomContainer, ...bottomContainer.children)
  mousedownBottom.whiteAdd(bottomContainer, ...bottomContainer.children)
  return {
    upSprite,
    downSprite,
    bottomContainer,
    borderContainer,
  }
}
